<!--
 * @Author: 梁青春
 * @Date: 2025-10-15 13:38:45
 * @LastEditTime: 2025-10-15 16:36:28
 * @LastEditors: 梁青春
-->
<template>
  <div class="left-panel">
    <div class="search">
      <!-- 患者搜索 -->
      <div class="search-box">
        <el-input v-model="searchText" placeholder="请输入患者姓名/收费单" clearable></el-input>
      </div>
    </div>
    <div class="todo-date">
      <div class="tabs">
        <h-tabs
          :tabs="[
            { label: '出院', value: 1 },
            { label: '在院', value: 2 }
          ]"
          v-model="activeTab"
        />
      </div>
      <div class="picker">
        <el-popover placement="bottom" trigger="click" width="360px" popper-class="filter-box">
          <template #reference> <el-button text :icon="Filter">筛选</el-button></template>
          <template #default>
            <div class="filter-content">
              <div class="filter-item">
                <el-select placeholder="主管医生">
                  <el-option label="医生A" value="1" />
                  <el-option label="医生B" value="2" />
                </el-select>
              </div>
              <div class="filter-item">
                <el-select placeholder="主管护士">
                  <el-option label="护士A" value="1" />
                  <el-option label="护士B" value="2" />
                </el-select>
              </div>
              <div class="filter-item">
                <el-select placeholder="科室">
                  <el-option label="科室A" value="1" />
                  <el-option label="科室B" value="2" />
                </el-select>
              </div>
            </div>
            <div class="filter-btns">
              <el-button>取消</el-button>
              <el-button type="primary">取消</el-button>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
    <!-- 患者列表 -->
    <div class="patient-list">
      <div class="patient-item" v-for="item in patientList" :key="item.id">
        <div class="patient-icon iconfont" :class="[item.sex === 2 ? 'icon-woman' : 'icon-man']"></div>
        <div class="patient-info">{{ item.name }}</div>
        <div class="patient-status">{{ item.age }}岁 {{ item.registrationTime }}</div>
      </div>
    </div>
    <!-- 小工具 -->
    <div class="tools">
      <div class="tools-title">小工具</div>
      <ul>
        <li @click="showChargingDashboard">
          <el-icon><DataLine /></el-icon>
          收费看板
        </li>
        <li>
          <el-icon><Printer /></el-icon>
          收费发票
        </li>
        <li @click="showDepositManagement">
          <i class="iconfont icon-fufei" />
          押金管理
        </li>
      </ul>
    </div>

    <!-- 收费看板弹窗 -->
    <ChargingDashboardDialog ref="chargingDashboardRef" />

    <!-- 押金管理弹窗 -->
    <DepositManagementDialog ref="depositManagementRef" />
  </div>
</template>
<script setup name="Left">
import { ref } from 'vue'
import { Filter } from '@element-plus/icons-vue'
import ChargingDashboardDialog from './ChargingDashboardDialog.vue'
import DepositManagementDialog from './DepositManagementDialog.vue'

const searchText = ref('')
const activeTab = ref(1)
const chargingDashboardRef = ref(null)
const depositManagementRef = ref(null)

// 患者列表
const patientList = ref([
  {
    id: 1,
    name: '张三',
    sex: 1,
    age: 25,
    registrationTime: '10-01',
    status: '待处理'
  },
  {
    id: 2,
    name: '李四',
    sex: 2,
    age: 30,
    registrationTime: '10-11',
    status: '待处理'
  }
])

// 显示收费看板弹窗
const showChargingDashboard = () => {
  chargingDashboardRef.value?.show()
}

// 显示押金管理弹窗
const showDepositManagement = () => {
  depositManagementRef.value?.show()
}
</script>
<style scoped lang="scss">
@use '@/assets/styles/variables.module.scss' as *;
.left-panel {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.search {
  width: 100%;
  display: flex;
  margin: 0 auto;
  height: $sub-navbar-height;
  padding: $padding-md;
  align-items: center;
  border-bottom: 1px solid $border-color;
  .el-input {
    --el-input-border-radius: 4px 0 0 4px;
  }
  .el-input__inner {
    --el-input-border-radius: 4px 0 0 4px;
  }
  .el-button {
    border-radius: 0 4px 4px 0;
  }
}
.todo-date {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  padding: 0 $padding-md;
  align-items: center;
  border-bottom: 1px solid $border-color;
  .tabs {
    position: relative;
  }

  .date-picker {
    position: relative;

    .date-picker-val {
      border: 0;
      background: transparent;
      color: #606266;
      font-size: $font-size-sm;
      padding: $padding-sm $padding-md;

      &:hover {
        background-color: #f5f7fa;
        color: $blue;
      }
    }

    .date-picker-panel {
      position: absolute;
      top: 100%;
      right: 0;
      z-index: 1000;
      background: #fff;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      box-shadow: 0 2px 12px 0 $box-shadow-color;
      padding: $padding-sm;
      margin-top: $margin-sm;
      min-width: 180px;

      // 确保日期选择器样式正确
      :deep(.el-date-editor) {
        width: 100%;

        .el-input__wrapper {
          box-shadow: none;
          border: 1px solid $border-color;
          border-radius: $border-radius;
        }

        .el-input__inner {
          text-align: center;
          padding: $padding-sm $padding-md;
        }
      }

      // 日期面板样式
      :deep(.el-picker-panel) {
        margin-top: $margin-sm;
        border: none;
        box-shadow: none;
      }
    }
  }
}
.patient-list {
  padding: 0 $padding-md;
  flex: 1;
  overflow-y: auto;
  .patient-item {
    display: flex;
    align-items: center;
    padding: $padding-sm $padding-md;
    border-radius: $border-radius;
    margin-top: $margin-sm;
    .patient-icon {
      font-size: $icon-size;
      margin-right: 8px;
      border-radius: $border-radius;
      padding: 4px 8px;
      background-color: $icon-bg-color;
      color: $icon-color;
    }
    .patient-info {
      flex: 1;
    }
    .patient-status {
      padding: 4px 8px;
      border-radius: $border-radius;
    }
    &:last-child {
      margin-bottom: $margin-sm;
    }
    &:hover {
      background-color: $blue;
      color: #fff;
    }
    &.active {
      background-color: $blue;
      color: #fff;
    }
  }
}
.tools {
  &-title {
    background: $light-bg;
    padding: $padding-sm $padding-md;
  }
  ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    li {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: $padding-sm $padding-md;
      border-bottom: 1px solid $border-color;
      i {
        margin-right: $margin-sm;
      }
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        background-color: $blue;
        color: #fff;
      }
      &.active {
        background-color: $blue;
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
@use '@/assets/styles/variables.module.scss' as *;
.filter-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  --el-popover-padding: 0;
  .filter-content {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: $padding-sm;
    gap: $margin-sm;
    .filter-item {
      width: 48%;
      display: flex;
    }
  }
  .filter-btns {
    padding: $padding-sm;
    width: 100%;
    display: flex;
    margin-top: $margin-sm;
    border-top: 1px solid $border-color;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
